<template>
  <a-dropdown :arrow="true" placement="bottom" trigger="click">
    <span style="color: rgba(0, 0, 0, 0.88); cursor: pointer; font-size: 16px">
      <iconfont name="#icon-hangmidu" />
    </span>
    <template #overlay>
      <a-menu>
        <div style="text-align: center; line-height: 36px">行高设置</div>
        <a-menu-divider />
        <a-menu-item key="small">
          <div
            @click="onClick('small')"
            :class="{
              actived: value === 'small',
            }"
          >
            高密度
          </div>
        </a-menu-item>
        <a-menu-item key="middle">
          <div
            @click="onClick('middle')"
            :class="{
              actived: value === 'middle',
            }"
          >
            中密度
          </div>
        </a-menu-item>
        <a-menu-item key="large">
          <div
            @click="onClick('large')"
            :class="{
              actived: value === 'large',
            }"
          >
            低密度
          </div>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>
<script setup>
import { useVModel } from '@vueuse/core'
import iconfont from '@/components/iconfont.vue'
/**
 * 定义外部参数
 */
let props = defineProps({
  value: {
    type: String,
    default() {
      return 'large'
    },
  },
})
/**
 * 定义事件
 */
let emit = defineEmits(['update:value'])
/**
 * 双向绑定
 */
let value = useVModel(props, 'value', emit)
function onClick(lineheight) {
  value.value = lineheight
}
</script>
<style lang="less" scoped>
.actived {
  color: #3d6d99;
}
</style>
